import React, { useEffect, useState } from 'react'
import { ResultPage, Card, Tabs, Popup, Tag, IndexBar, List, SearchBar, Button, Radio } from 'antd-mobile'
import { TruckOutline, LocationFill } from 'antd-mobile-icons'
import styles from './home.module.css'
import instance from '../../api/instance'
import { useSearchParams } from 'react-router-dom'

function Index() {
  const [visible5, setVisible5] = useState(false)
  const [sp, setSp] = useSearchParams()

  const start = sp.get('start')
  const end = sp.get('end')


  const [cityList1, setCityList1] = useState([])
  const [hotList, setHotList] = useState([])
  const ListData = async () => {
    const res = await instance.get('/api/city', { params: { start, end } })
    console.log('res', res)
    setCityList1(res.data.data.cityList)
    setHotList(res.data.data.hotCities)
  }
  useEffect(() => {
    ListData()
  }, [])

  return (
    <div>
      <ResultPage
        status=''
        title='车票预订'
        description='便捷购票，呵护您的每一次出行'
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <Tabs>
            <Tabs.Tab title='机票' key='1'>
              机票
            </Tabs.Tab>
            <Tabs.Tab title='特价机票' key='2'>
              特价机票
            </Tabs.Tab>
            <Tabs.Tab title='火车票' key='3'>
              <Tabs>
                <Tabs.Tab title='单程' key='fruits'>
                  <div className={styles.dc}>
                    <span onClick={() => setVisible5(true)}>北京</span>
                    <TruckOutline fontSize={26} />
                    <span onClick={() => setVisible5(true)}>上海</span>
                  </div>
                  <div className={styles.ss}>
                    <span style={{ fontSize: '20px' }}>6月4日</span>
                    <span style={{ color: '#ccc' }}>明天</span>
                  </div>
                  <div className={styles.dc}>
                    <span><Radio>学生票</Radio></span>
                    <span><Radio>只看高铁动车</Radio></span>
                  </div>
                  <div className={styles.ss}>
                    <Button block color='warning' shape='rounded'>
                      搜索火车票
                    </Button>
                  </div>
                  <div>
                    <span style={{color:'#ccc'}}>北京-上海</span>
                  </div>
                </Tabs.Tab>
                <Tabs.Tab title='往返' key='vegetables'>
                  往返
                </Tabs.Tab>
              </Tabs>
            </Tabs.Tab>
            <Tabs.Tab title='汽车票' key='4'>
              汽车票
            </Tabs.Tab>
            <Tabs.Tab title='接送/租车' key='5'>
              接送/租车
            </Tabs.Tab>
          </Tabs>
        </ResultPage.Card>

        <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card>
      </ResultPage>
      {/* 弹出层 */}
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >

        <div>
          <div style={{ height: window.innerHeight }}>
            <SearchBar placeholder='请输入内容' />
            <Card title={<div>当前位置:<LocationFill />{hotList.length > 0 && hotList[0].name}</div>}></Card>
            <Card title='热门城市'>
              {
                hotList.length > 0 && hotList.map((item, index) => {
                  return <Tag key={index} style={{ margin: '5px' }}>{item.name}</Tag>
                })
              }
            </Card>
            <IndexBar>
              {cityList1.map(item => {
                return (
                  <IndexBar.Panel
                    index={item.title}
                    title={`${item.title}`}
                    key={`${item.title}`}
                  >
                    <List>
                      {item.citys.map((item, index) => (
                        <List.Item key={index}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
            </IndexBar>
          </div>
        </div>

      </Popup>
    </div>
  )
}

export default Index
